<template>
  <div class="C-Content">
    <Title :title="'社区内容'">
      <!-- <template #detail>
        <div class="title-time">
          数据来自凤凰新闻
        </div>
      </template> -->
    </Title>

    <!-- 显示内容 -->
    <div v-if="!elSate" class="CC-body">
      <!-- <a href="#" v-for="index in 6" :key="index"> 
      </a>-->
    </div>

    <!-- 隐藏内容 -->
    <el-skeleton v-if="elSate" :rows="15" animated style="padding: 30px" />
  </div>
</template>

<script>
export default {
  props: {
    fatherData: {
      type: Object
    }
  },
  watch: {
    fatherData: {
      handler(newVal) {
        this.init = newVal;
        this.initData();
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      // 接收数据
      init: null,
      // 状态码
      state: null,
      // 是否不显示
      elSate: true
    };
  },
  methods: {
    // 初始化父组件传递过来的数据
    initData() {
      if (this.fatherData.state !== 200) {
        // 获取信息失败
        // console.log('获取信息失败')
        // console.log(this.fatherData)
        return (this.elSate = true);
      } else {
        this.elSate = false;
        // console.log(this.init)
        // console.log('获取信息成功')
      }
    }
  },
  created() {
    this.init = this.fatherData;
  }
};
</script>

<style lang="less" scoped>
.C-Content {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
  // 标题
  .title-time {
    margin: 0 0.625rem;
    color: #888;
  }
  // 内容
  .CC-body {
    padding: 0 5rem;
    color: #333;
    a {
      &:hover {
        color: #333;
      }
    }
  }
}
</style>
